<template>
	<view class="myPageBox">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<!-- <view class="topBox">
			<image :src="setImg(userInfo.avatar)" v-if="userInfo.avatar" class="userImg" mode="scaleToFill">
			</image>
			<image src="@/static/home/useImg.png" v-else class="userImg" mode="scaleToFill"></image>
		</view> -->
		<!-- <view class="btn">更换</view> -->
		<uni-nav-bar height="88rpx" fixed title="个人信息" color="#000000" :border="false" left-icon="left"
			@clickLeft="$back" statusBar>
		</uni-nav-bar>
		<view class="formBox">
			<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm" labelWidth="160rpx">
				<u-form-item label="头像" borderBottom>
					<view class="inputView">
						<image :src="setImg(userInfo.avatar)" v-if="userInfo.avatar" class="userImg" mode="scaleToFill">
						</image>
						<image src="@/static/home/useImg.png" v-else class="userImg" mode="scaleToFill"></image>

					</view>
				</u-form-item>
				<u-form-item label="姓名" borderBottom>
					<!-- <u--input v-model="userInfo.name" border="none" placeholder="请填写姓名"></u--input> -->
					<view class="inputView">
						<view>{{userInfo.nickName}}</view>
					</view>
				</u-form-item>
				<u-form-item label="性别" borderBottom>
					<!-- <u--input v-model="userInfo.sexLabel" disabled disabledColor="#ffffff" placeholder="请选择性别"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
					<view class="inputClick" @click.stop="openPicker('sys_user_sex','sex','请选择性别')"></view> -->
					<view class="inputView">
						<view>{{dicts.sys_user_sex[userInfo.sex]||userInfo.sex}}</view>
					</view>
				</u-form-item>
				<u-form-item label="手机号码" borderBottom prop="phonenumber">
					<u--input v-model="userInfo.phonenumber" inputAlign="right" color="#979797" placeholder="请输入手机号码"
						border="none"></u--input>
					<!-- <view class="inputView">
						<view>{{userInfo.phonenumber}}</view>
					</view> -->
				</u-form-item>
				<u-form-item label="地址" borderBottom prop="address">
					<u--input v-model="userInfo.address" inputAlign="right" color="#979797" placeholder="请输入地址"
						border="none"></u--input>
					<!-- <view class="inputView">
						<view>{{userInfo.address}}</view>
					</view> -->
				</u-form-item>

			</u--form>

		</view>
		<view style="margin-top: 80rpx;"></view>
		<view class="btnList">
			<!-- <u-button class="w50" @click="submit" shape="circle" type="primary">提交</u-button> -->
			<view class="submitBtn " @click="submit">确认修改</view>
			<!-- <u-button class="w50" shape="circle" type="info" @click="$back()">返回</u-button> -->
		</view>
		<myPicker :show="pickerShow" :columns="[actions]" :title="pickerTitle"
			@confirm="confirmPicker($event,'value','label')" @close="closePicker('pickerShow')"
			@cancel="closePicker('pickerShow')"></myPicker>
		<!-- <u-datetime-picker :minDate="-4607395543000" ref="datetimePicker" :show="datetimeShow" v-model="datetimeValue"
			mode="date" @confirm="datetimeConfirm" @close="closePicker('datetimeShow')"
			@cancel="closePicker('datetimeShow')"></u-datetime-picker> -->
	</view>
</template>

<script>
	import {
		certification
	} from "@/api/certification.js"
	import * as util from "@/utils/util.js";
	import {
		dictDataList
	} from "@/api/system.js"
	import {
		systemUser
	} from "@/api/user.js"
	import * as uploadApi from "@/api/upload.js"
	export default {
		data() {
			return {
				pickerShow: false,
				pickerTitle: '',
				dataName: '',
				dicts: {
					sys_user_sex: {},
					elite_type: {}
				},
				dictList: {
					sys_user_sex: [],
					elite_type: []
				},
				actions: [],
				defaultNum: '浙',
				userInfo: {
					"remark": "",
					"sexLabel": '',
					"name": "",
					"sex": "",
					"birth": "",
					"birthLabel": "",
					"phonenumber": "",
					"idCard": "",
					"eliteType": "",
					"eliteTypeLabel": '',
					"certificationMaterial": "",
					"catLicense": '',
					avatar: ''
				},
				eliteInfo: null,
				rules: {
					'address': {
						type: 'string',
						required: true,
						message: '请输入地址',
						trigger: ['blur']
					},
					'phonenumber': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
				}
			};
		},
		onLoad() {
			this.getDictDataList('elite_type')
			this.getDictDataList('sys_user_sex')
		},
		onShow() {
			this.$store.dispatch('userBaseInfo').then(res => {
				this.userInfo = res.user
				this.eliteInfo = res.eliteInfo
			})
		},
		methods: {
			setImg(url) {
				if (url) {
					return url.split(',')[0]
				} else {
					return url
				}
			},
			openPicker(dictName, dataName, title) {
				this.pickerShow = true
				this.actions = this.dictList[dictName]
				this.dataName = dataName
				this.pickerTitle = title
			},
			confirmPicker(e, str1, str2) {
				console.log(e);
				this.userInfo[this.dataName] = e.value[0].value
				this.userInfo[this.dataName + 'Label'] = e.value[0].label
				this.pickerShow = false
			},
			closePicker(showName) {
				this[showName] = false

			},
			getDictDataList(dictType) {
				return new Promise((resolve, reject) => {
					dictDataList(dictType).then(({
						rows
					}) => {
						let objs = {}
						let keyValues = []
						rows.forEach((item) => {
							objs[item.dictValue] = item.dictLabel
							keyValues.push({
								label: item.dictLabel,
								text: item.dictLabel,
								value: item.dictValue
							})
						})
						this.dicts[dictType] = objs
						this.dictList[dictType] = keyValues
						resolve({
							objs,
							keyValues,
							rows
						})
					}).catch(reject)
				})
			},
			numberInputResult(carNo) {
				// console.log('结果--' + carNo)
				this.userInfo.catLicense = carNo
			},
			submit() {
				const that = this
				// this.userInfo.certificationMaterial = JSON.stringify(this.fileList_imgs)
				this.$refs.uForm.validate().then(res => {
					const fromData = {
						// catLicense: this.userInfo.catLicense,
						// userName: this.userInfo.userName,
						// nickName: this.userInfo.nickName,
						address: this.userInfo.address,
						phonenumber: this.userInfo.phonenumber,
					}
					uni.$u.throttle(
						systemUser(fromData).then(res => {
							that.$toast1("操作成功", () => {
								setTimeout(() => {
									that.$back()
								}, 500)
							})

						}), 1000)
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>
<style lang="scss" scoped>
	.myPageBox {
		background-color: #F4F5F8;
		height: 100vh;
	}

	.topBox {
		background-color: #fff;
		text-align: center;
		padding-top: 30rpx;
		padding-bottom: 40rpx;
		margin-bottom: 24rpx;

	}

	.userImg {
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-bottom: 24rpx;
	}

	.btn {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #6FA9FF;
	}

	.formBox {
		background-color: #fff;
		padding: 0 30rpx;
	}

	.inputView {
		width: 100%;
		text-align: right;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #979797;
	}

	::v-deep .car-input-container {
		padding-left: 0;
	}

	.topBox {
		.userImg {}

		.btn {}
	}

	.btnList {
		display: flex;
		justify-content: center;

		.submitBtn {
			width: 60%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 88rpx;
			background: #008AFF;
			border-radius: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.w50 {
			width: 48%;
		}
	}

	.pageBox {
		padding: 0 30rpx;

		/deep/ .u-form-item {
			position: relative;

		}

		.inputClick {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}

		.button {
			background: linear-gradient(90deg, #5F96E8 0%, #1977E1 100%);
		}
	}
</style>